<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="商城首页"/>
    <meta name="author" content="chaokunyang"/>
    <link rel="icon" th:href="@{/favicon.ico}" />

    <title>商城首页</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link th:href="@{/ie10-viewport-bug-workaround.css}" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="../static/css/home.css" th:href="@{/css/home.css}" rel="stylesheet"/>
    <link href="../static/css/carousel.css" th:href="@{/css/category.css}" rel="stylesheet"/>
    <link href="../static/css/carousel.css" th:href="@{/css/carousel.css}" rel="stylesheet"/>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>

<div id="main-container" class="clearfix">
    <!-- 分类 -->
    <div id="category">
        <!--/*@thymesVar id="category" type="com.chaokunyang.shop.model.Category"*/-->
        <ul class="list-unstyled">
            <li class="level1" th:each="level1 : ${category.getChilds()}">
                <span th:text="${level1.name}">l1 category element name</span>
                <ul class="level2-container list-unstyled">
                    <li class="level2" th:each="level2 : ${level1.getChilds()}">
                        <span th:text="${level2.name}">l2 category element name</span>
                        <ul class="list-unstyled">
                            <li class="level3" th:each="level3 : ${level2.getChilds()}">
                                <span th:text="${level3.name}">l3 category element name</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <!--/*@thymesVar id="carousels" type="java.util.List<com.chaokunyang.shop.model.Carousel>"*/-->
    <!-- Carousel
================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" class="active" th:each="carousel, iterStat : ${carousels}" th:class="${iterStat.index == 0} ? 'active'" th:attr="data-slide-to=${iterStat.index}">
            </li>
            <!--<li data-target="#myCarousel" data-slide-to="1"></li>-->
        </ol>
        <div class="carousel-inner" role="listbox">
            <div th:each="carousel, iterStat : ${carousels}" th:class="${iterStat.index == 0} ? 'item active' : 'item'">
                <a th:href="${carousel.hrefUrl}">
                    <img class="first-slide" th:src="${carousel.pictureUrl}" alt="First slide" />
                    <div class="container">
                        <div class="carousel-caption">
                            <p th:text="${carousel.body}"></p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- /.carousel -->
</div>



<div class="container marketing">


    <hr class="featurette-divider"/>

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">楼层 <span class="text-muted">1 手机</span></h2>
            <p class="lead">楼层1</p>
        </div>
        <div class="col-md-5">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image" />
        </div>
    </div>

    <hr class="featurette-divider"/>

    <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
            <h2 class="featurette-heading">楼层<span class="text-muted">2 VR</span></h2>
            <p class="lead">楼层2 内容</p>
        </div>
        <div class="col-md-5 col-md-pull-7">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image" />
        </div>
    </div>

    <hr class="featurette-divider"/>

    <!-- FOOTER -->
    <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; 2016 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
    </footer>

</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script th:src="@{/js/ie10-viewport-bug-workaround.js}"></script>
</body>
</html>
